<template>
  <div class="head4">
    <div class="top_center">
      <h2>可视化头部标题</h2>
    </div>
    <div class="top_left top_nav">
      <ul>
        <li class="on">
          <a>
            <span>菜单1</span>
          </a>
        </li>
        <li>
          <a>
            <span>菜单2</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="top_right top_nav">
      <ul>
        <li>
          <a>
            <span>菜单3</span>
          </a>
        </li>
        <li>
          <a>
            <span>菜单4</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
    data() {
      return {

      }
    }
}
</script>

<style lang="less" scoped>
.head4 {
  width: 100%;
  height: 91px;
  margin: 0px auto;
  text-align: center;
  position: relative;
  z-index: 99;
}

.top_center {
  position: absolute;
  background: url(~@/assets/images/head/head4/top_bg_c.png) no-repeat center;
  height: 91px;
  width: 100%;
  top: 0px;
  left: 50%;
  transform: translate(-50%, 0);
}

.top_center h2{
  font-size: 44px;
  font-weight: bold;
  position: relative;
  z-index: 2;
  color: #d3f5ff;
  -webkit-mask:linear-gradient(to bottom, #d3f5ff, #d3f5ff, transparent );
  text-shadow: 0 3px 5px #0d497e;
}

.top_nav ul {
  display: inline-block;
  padding-top: 40px;
}

.top_nav ul li a {
  display: block;
  cursor: pointer;
  line-height: 44px;
  font-size: 22px;
  font-weight: bold;
}

.top_nav ul li a span {
  background-image: -webkit-linear-gradient(top, #fff, #6adae2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #f7feff;
  line-height: 22px;
}

.top_nav ul li:hover a span,
.top_nav ul li.on a span {
  background-image: -webkit-linear-gradient(top, #fed35e, #eaa80a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.top_left {
  position: absolute;
  right: calc(50% + 270px);
}

.top_left ul li {
  float: left;
  width: 157px;
  height: 44px;
  text-align: center;
  background: url(~@/assets/images/head/head4/top_bg_l.png) no-repeat;
  margin-left: -15px;
}

.top_left ul li:hover,
.top_left ul li.on {
  background: url(~@/assets/images/head/head4/top_bg_l_on.png) no-repeat;
}

.top_right {
  position: absolute;
  left: calc(50% + 285px);
}

.top_right ul li {
  float: left;
  width: 157px;
  height: 44px;
  text-align: center;
  background: url(~@/assets/images/head/head4/top_bg_r.png) no-repeat;
  margin-left: -15px;
}

.top_right ul li:hover,
.top_right ul li.on {
  background: url(~@/assets/images/head/head4/top_bg_r_on.png) no-repeat;
}
</style>